<!--创作控制台_top——数据统计-->
<template>
  <div>
    <el-row :gutter="21">
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">

        <div class="flex-between card-back-css green-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">提现金额(当天)</span>
            <div>{{amountTotalObject?.withdrawal_today_amount}}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css blue-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">提现次数(当天)</span>
            <div>{{amountTotalObject?.withdrawal_today_count }}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css orange-bj ">
          <div class="flex-columns card-left">
            <span class="font-overflow">{{'提现('+configBS?.currency_name+'当天)'}}</span>
            <div>{{amountTotalObject?.withdrawal_today_number}}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">

        <div class="flex-between card-back-css green-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">提现金额(昨)</span>
            <div>{{amountTotalObject?.withdrawal_yesterday_amount}}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css blue-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">提现次数(昨)</span>
            <div>{{amountTotalObject?.withdrawal_yesterday_count }}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css orange-bj ">
          <div class="flex-columns card-left">
            <span class="font-overflow">{{'提现('+configBS?.currency_name+'昨)'}}</span>
            <div>{{amountTotalObject?.withdrawal_yesterday_number}}</div>
          </div>

        </div>
      </el-col>

    </el-row>
    <el-row :gutter="21">
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css purple-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">提现金额(月)</span>
            <div>{{amountTotalObject?.withdrawal_month_amount}}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css red-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">提现次数(月)</span>
            <div>{{amountTotalObject.withdrawal_month_count}}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css blue-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">{{'提现('+configBS?.currency_name+'月)'}}</span>
            <div>{{amountTotalObject.withdrawal_month_number}}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css purple-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">提现金额(总)</span>
            <div>{{amountTotalObject?.withdrawal_total_amount}}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css red-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">提现次数(总)</span>
            <div>{{amountTotalObject.withdrawal_total_count}}</div>
          </div>

        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="4"
              :span="4">
        <div class="flex-between card-back-css blue-bj">
          <div class="flex-columns card-left">
            <span class="font-overflow">{{'提现('+configBS?.currency_name+'总)'}}</span>
            <div>{{amountTotalObject.withdrawal_total_number}}</div>
          </div>

        </div>
      </el-col>

    </el-row>

  </div>
</template>
  
  <script>
import { withdrawal } from '@/api/financialStatistics/index'
export default {
  name: "statistics-top",
  data () {
    return {
      allInfo: {},
      amountTotalObject: null,
      configBS: JSON.parse(localStorage.getItem('config')),

    }
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      const res = await withdrawal({})
      if (res.code == 0) {
        console.log(res.data)
        this.amountTotalObject = res.data

      }
    }
  }
}
  </script>
  
  <style lang="less" scoped>
.el-avatar {
  background-color: transparent !important; // 无背景色
}
.orange-bj {
  //   box-shadow: 0px 6px 8px 0px rgba(255, 190, 38, 0.25);
  background: url('~@/assets/会员卡/组合 1084.png');
  background-size: cover;
  /*background: linear-gradient(180.00deg, rgb(255, 171, 79),rgb(228, 125, 54) 100%);*/
}
.blue-bj {
  //   box-shadow: 0px 6px 8px 0px rgba(118, 135, 245, 0.27);
  background-image: url('~@/assets/会员卡/组合 1083.png');
  background-size: cover;
  /*background: linear-gradient(180.00deg, rgb(117, 127, 248),rgb(38, 66, 239) 100%);*/
}
.purple-bj {
  //   box-shadow: 0px 6px 8px 0px rgba(162, 76, 255, 0.25);
  background-image: url('~@/assets/会员卡/组合 1082.png');
  background-size: cover;
  /*background: linear-gradient(180.00deg, rgb(182, 116, 253),rgb(155, 70, 246) 100%);*/
}
.green-bj {
  //   box-shadow: 0px 6px 8px 0px rgba(0, 190, 103, 0.25);
  background-image: url('~@/assets/会员卡/组合 1081.png');
  background-size: cover;
  /*background: linear-gradient(180.00deg, rgb(106, 239, 109),rgb(46, 217, 41) 100%);*/
}
.red-bj {
  //   box-shadow: 0px 6px 8px 0px rgba(0, 190, 103, 0.25);
  background-image: url('~@/assets/会员卡/组合 1080.png');
  background-size: cover;
  /*background: linear-gradient(180.00deg, rgb(106, 239, 109),rgb(46, 217, 41) 100%);*/
}
.card-back-css {
  margin-bottom: 24px;
  padding: 35px 20px;
  border-radius: 10px;
  .card-left {
    cursor: default;
    color: #fff;
    span {
      font-size: 18px;
    }
    div {
      margin-top: 2px;
      font-size: 36px;
      font-weight: bold;
    }
  }
}
</style>
  